Debug in Vue
目次：
debugは何ですか？
何時にdebugが必要か？
debug時、何にフォーカスするか？
Debug Tools 紹介
Debug 方法
その他
debugは何ですか？
デバッグ（debug）とは、コンピュータプログラムや電気機器中のバグ・欠陥を発見および修正し、動作を仕様通りのものとするための作業である。
何時にdebugが必要か？
プログラムがの動作が予想したものではない場合：
UI が正しく表示しない
Functionの結果が正しくない
Compiling, Building Error
など
debug時、何にフォーカスするか？
Vue 開発時
1. Props
2. Data(State)
3. Computed
4. Input value
5. CSS
6. HTML event
7. API request and response
Debug Tools 紹介
1. Vue Dev Tool
2. Chrome Dev Tool
3. VSCode debugger
onuma.icon 詳しく知りたいです！
Vue Dev Tool 紹介
https://raw.githubusercontent.com/vuejs/vue-devtools/dev/media/screenshot-shadow.png
1. Props
2. State
3. Input value
4. CSS
Vue
Chrome
props
https://gyazo.com/6be9fab9b60f2e860bbc1aba6b43255c
states
https://gyazo.com/9c10650bf77606e19eccfdffecbf89d7
Chrome Dev tool 紹介
https://gyazo.com/e33ea087b00f72011526578bbbac2e58
https://gyazo.com/3e930426d0baa85bf0b7ecec50da6245
VSCode debugger 紹介
https://gyazo.com/3acd87d51cfd187df3b631ed33ceb3a6
デバッグする場合はlaunch.jsonファイルを作る必要がある。
Debug 方法
1. console
2. breakpoint
3. duck toy debug
break point vs. console:
How to use breakpoint?
- VSCode debugger
How to use breakpoint in Pug?
VSCodeのブレークポイントはなぜか40行目で止まる。
Chromeでブレークポイントを設定して、VSCodeで確認する。
1. console
2. Chrome Sources
3. breakpoint
その他
Vuex
debug時、何にフォーカスするか？
Dispath
Commit
Mutation
Module State
https://vuex.vuejs.org/vuex.png
responsive preview
time trail
umamichi.icon 僕はどちらかとブレイクポイントよりかは console.log を使いまくるので、VScode snippets 登録してすぐにconsole.log出せるようにしてたりします
code:vscode snippets
"Print to console": {
"prefix": "cl",
"body": [
"console.log('$1:', $1);",
"$2"
],
"description": "Log output to console"
}
何を出力していいか分からない時に使うといいかも。
tamuraryoya.icon WebStormだと、値.logでconsole.logが展開されたりします
code:ts
obj.log → console.log(obj);
foo ${bar}.log → console.log(foo ${bar});